<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '上传记录',
  },
}
</route>

<template>
  <view class="flex flex-col h-100vh bg-#F2F3F7 px-30rpx">
    <geek-header title="上传记录" placeholder></geek-header>
    <scroll-view scroll-y class="flex-1 overflow-auto">
      <wd-form ref="form" :model="formModel">
        <view class="text-#212934 text-36rpx mt-38rpx font-bold">基本信息</view>
        <view class="bg-box mt-30rpx">
          <wd-cell-group border>
            <wd-input
              label="点位名称"
              label-width="100px"
              prop="siteLongitude"
              clearable
              placeholder="请输入点位名称"
            />

            <wd-input
              label="点位位置"
              label-width="100px"
              placeholder="请选择点位位置"
              v-model="formModel.busSiteAddress"
              prop="busSiteAddress"
            />

            <wd-button class="!ml-20rpx mt-20rpx" @click="chooseLocation2">选择位置</wd-button>

            <wd-cell title="现场照片" title-width="100px" prop="busSitePhoto">
              <wd-upload
                required
                :action="uploadUrl"
                :extension="['.jpg,.png']"
                :limit="3"
                :max-size="500000"
                v-model:file-list="formModel.busSupervisionEvidenceList"
              ></wd-upload>
              <view class="text-#666E7E text-24rpx text-left">
                仅支持png、jpg格式，一次最多上传三张，每张照片不大于500KB
              </view>
            </wd-cell>
          </wd-cell-group>
        </view>

        <view class="text-#212934 text-36rpx mt-38rpx font-bold">现场环境</view>
        <view class="bg-box mt-30rpx">
          <wd-cell-group border>
            <wd-cell title="网络状态" title-width="100px" prop="canInvoice">
              <uni-segmented-control
                :current="formModel.netState === 0 ? 0 : 1"
                @clickItem="onClickItemNetState"
                :values="netStates"
                styleType="button"
              ></uni-segmented-control>
            </wd-cell>

            <wd-cell title="取电状态" title-width="100px" prop="canInvoice">
              <uni-segmented-control
                :current="formModel.eState === 0 ? 0 : 1"
                @clickItem="onClickItemEState"
                :values="eStates"
                styleType="button"
              ></uni-segmented-control>
            </wd-cell>

            <wd-cell title="安装方式" title-width="100px" prop="canInvoice">
              <uni-segmented-control
                :current="formModel.azState"
                @clickItem="onClickAZEState"
                :values="azStates"
                styleType="button"
              ></uni-segmented-control>
            </wd-cell>

            <wd-cell title="镜头方向" title-width="100px" prop="canInvoice">
              <uni-segmented-control
                :current="formModel.jtState"
                @clickItem="onClickJTState"
                :values="jtfx"
                styleType="button"
              ></uni-segmented-control>
            </wd-cell>
          </wd-cell-group>
        </view>

        <view class="text-#212934 text-36rpx mt-38rpx font-bold">设备信息</view>

        <view v-for="value in devicesList" :key="value" class="bg-box mt-30rpx">
          <wd-cell-group border>
            <wd-picker
              :columns="deviceTypes"
              label-key="itemValue"
              value-key="itemCode"
              label="设备类型"
              v-model="formModel.deviceType"
            />

            <wd-input
              label="设备数量"
              label-width="100px"
              placeholder="请输入设备数量"
              v-model="formModel.deviceCount"
              prop="deviceCount"
            />
          </wd-cell-group>
        </view>

        <view
          class="bg-add text-#377BF4 text-24rpx h-82rpx flex items-center justify-center mt-30rpx font-bold"
          @click="addDevice"
        >
          +新增设备
        </view>
      </wd-form>
    </scroll-view>

    <view class="h-100rpx mt-40rpx">
      <view class="h-88rpx mx-30rpx bg-#377BF4 relative rd-16rpx" @click="">
        <view
          class="text-#FFFFFF text-32rpx flex items-center justify-center font-bold h-100% w-full"
        >
          提交
        </view>
        <image
          class="w-100% h-100% pos-absolute top-0 left-0 z-10"
          src="@/static/images/bg_bt.png"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const uploadUrl = import.meta.env.VITE_UPLOAD_BASEURL

const deviceTypes = ref([
  { itemCode: '1', itemValue: '设备类型1' },
  { itemCode: '2', itemValue: '设备类型2' },
])
const netStates = ref(['有网络', '无网络'])
const eStates = ref(['有电', '无电'])
const azStates = ref(['壁装', '借杆', '立杆'])
const jtfx = ref(['东', '南', '西', '北'])

const devicesList = ref([])

const formModel = ref({
  busSiteAddress: '',
  siteLongitude: '',
  siteLatitude: '',
  busSupervisionEvidenceList: [],
  netState: 0,
  eState: 0,
  azState: 0,
  jtState: 0,
  deviceType: '',
  deviceCount: '',
})

const chooseLocation2 = () => {
  uni.chooseLocation({
    success: (res) => {
      console.log('位置名称：' + res.name)
      console.log('详细地址：' + res.address)
      console.log('纬度：' + res.latitude)
      console.log('经度：' + res.longitude)
      formModel.value.siteLongitude = res.longitude.toString()
      formModel.value.siteLatitude = res.latitude.toString()
      formModel.value.busSiteAddress = res.address
    },
  })
}

const onClickItemNetState = (e) => {
  console.log(e.currentIndex, 'eeeeeeeee')
  if (e.currentIndex === 0) {
    formModel.value.netState = -1
  }
  if (e.currentIndex === 1) {
    formModel.value.netState = 1
  }
}

const onClickItemEState = (e) => {
  console.log(e.currentIndex, 'eeeeeeeee')
  if (e.currentIndex === 0) {
    formModel.value.eState = -1
  }
  if (e.currentIndex === 1) {
    formModel.value.eState = 1
  }
}

const onClickAZEState = (e) => {
  console.log(e.currentIndex, 'eeeeeeeee')
  formModel.value.azState = e.currentIndex
}

const onClickJTState = (e) => {
  console.log(e.currentIndex, 'eeeeeeeee')
  formModel.value.jtState = e.currentIndex
}

const addDevice = () => {
  devicesList.value.push(1)
}
</script>

<style lang="scss" scoped>
.bg-box {
  background: #ffffff;
  box-shadow: 0rpx 0rpx 32rpx 4rpx rgba(0, 0, 0, 0.06);
  border-radius: 16rpx;
}

.bg-add {
  border-radius: 8rpx;
  border: 2rpx solid #377bf4;
}

scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
